<template>
  <el-container class="main_con" style="padding-bottom:0px">
    <div class="info" style="padding-top:10px;">
      <div class="info_body">
        <el-form size="medium" label-width="100px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="用户详情" name="user">
              <div class="info_body_item">
                <div class="header" style="margin-top:0">基本信息</div>
                <div class="content">
                  <div class="user_base">
                    <div class="head_pic">
                      <div class="fpic" v-if="obj.picurl"><vimage style="border-radius: 100%;" :src="obj.picurl" :fit="'fill'"></vimage></div>
                    </div>
                    <div class="base_info">
                      <div class="name">{{ obj.nickname }}</div>
                      <div class="attrs">
                        <div class="attr_group">
                          <el-form size="medium" label-width="100px">
                            <el-form-item label="用户ID：">{{ obj.id }}</el-form-item>
                            <el-form-item label="真实姓名：">{{ obj.name }}</el-form-item>
                            <el-form-item label="联系电话：">{{ obj.mobile ? obj.mobile : '-' }}</el-form-item>
                            <el-form-item label="用户等级：">
                              {{ obj.levelname }}
                              <el-button type="text" @click="editLevelShow">修改</el-button>
                            </el-form-item>
                            <!-- <el-form-item label="标签组：">新用户</el-form-item> -->
                          </el-form>
                        </div>
                        <div class="attr_group">
                          <el-form size="medium" label-width="100px">
                            <el-form-item label="用户来源：">
                              <i v-if="obj.type == 1" class="weixin el-sc-xiaochengxu"></i>
                              <i v-if="obj.type == 2" class="weixin el-sc-weixin4"></i>
                              <i v-if="obj.type == 3" class="weixin el-sc-h5"></i>
                            </el-form-item>
                            <el-form-item label="注册时间：">{{ obj.create_time }}</el-form-item>
                            <el-form-item label="最后更新：">{{ obj.update_time }}</el-form-item>
                          </el-form>
                        </div>
                        <div class="attr_group">
                          <!-- <el-form size="medium" label-width="100px">
                            <el-form-item label="关注状态：">未关注</el-form-item>
                            <el-form-item label="用户密码：">未设置</el-form-item>
                          </el-form> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="info_body_item">
                <div class="header" style="margin-top:0">资产信息</div>
                <div class="content">
                  <div class="user_statistics">
                    <div class="statistics_item">
                      <div class="name">积分</div>
                      <div class="num" v-if="obj.cash">{{ obj.cash.integral }}</div>
                      <div class="btns">
                        <el-button size="medium" type="text" @click="editScoreShow">变更</el-button>
                        <el-button size="medium" @click="scoreShow" type="text">积分记录</el-button>
                      </div>
                    </div>
                    <div class="statistics_item">
                      <div class="name">余额</div>
                      <div class="num" v-if="obj.cash">￥{{ obj.cash.total }}</div>
                      <div class="btns">
                        <el-button size="medium" type="text" @click="editMoneyShow">变更</el-button>
                        <el-button size="medium" type="text" @click="moneyShow">余额记录</el-button>
                      </div>
                    </div>
                    <div class="statistics_item">
                      <div class="name">优惠券</div>
                      <div class="num">{{ obj.coupon }}</div>
                      <div v-has="3" class="btns"><el-button size="medium" type="text" @click="couponShow">查看</el-button></div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="info_body_item" style="margin-bottom:20px;">
                <div class="header" style="margin-top:0">交易信息</div>
                <div class="content">
                  <div class="user_consume">
                    <div class="consume_item">
                      <div class="icon"><i class="el-icon-s-order" style="color:#67C23A;"></i></div>
                      <div class="data">
                        <div class="name">累计成交订单数(笔)</div>
                        <div class="num">
                          <router-link :to="'/order/list/all?type=1&&keyword=' + id">
                            <el-link :underline="false">{{ statistic.order_number }}</el-link>
                          </router-link>
                        </div>
                      </div>
                    </div>

                    <div class="consume_item">
                      <div class="icon"><i class="el-icon-money" style="color:#67C23A;"></i></div>
                      <div class="data">
                        <div class="name">累计成交金额</div>
                        <div class="num">
                          <router-link :to="'/order/list/all?type=1&&keyword=' + id">
                            <el-link :underline="false">￥{{ statistic.order_money }}</el-link>
                          </router-link>
                        </div>
                      </div>
                    </div>

                    <div class="consume_item">
                      <div class="icon"><i class="el-icon-s-order" style="color:#F56C6C;"></i></div>
                      <div class="data">
                        <div class="name">累计退款订单数(笔)</div>
                        <div class="num">
                          <router-link :to="'/order/list/after?type=1&&keyword=' + id">
                            <el-link :underline="false">{{ statistic.refund_number }}</el-link>
                          </router-link>
                        </div>
                      </div>
                    </div>

                    <div class="consume_item">
                      <div class="icon"><i class="el-icon-money" style="color:#F56C6C;"></i></div>
                      <div class="data">
                        <div class="name">累计退款金额</div>
                        <div class="num">
                          <router-link :to="'/order/list/after?type=1&&keyword=' + id">
                            <el-link :underline="false">￥{{ statistic.refund_money }}</el-link>
                          </router-link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="分销商详情" name="distributor" v-if="false">分销商详情</el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <div class="info_bootom">
        <!-- <el-button size="medium" type="warning">加入黑名单</el-button> -->
        <!-- <el-button size="medium" type="danger">删除用户</el-button> -->
      </div>
    </div>
    <el-dialog title="余额记录" destroy-on-close :visible.sync="showMoney" width="60%"><moneyList ref="moneyListComponent" @success="moneyClose"></moneyList></el-dialog>
    <el-dialog title="积分记录" destroy-on-close :visible.sync="showScore" width="60%"><scoreList ref="scoreListComponent" @success="scoreClose"></scoreList></el-dialog>

    <el-dialog title="优惠券列表" destroy-on-close :visible.sync="showCoupon" width="70%"><couponList ref="couponListComponent" @success="couponClose"></couponList></el-dialog>
    <el-dialog title="变更余额" destroy-on-close :visible.sync="showMoneyEdit" width="30%">
      <editMoney ref="userMoneyEditComponent" @success="editMoneyClose"></editMoney>
    </el-dialog>
    <el-dialog title="变更积分" destroy-on-close :visible.sync="showScoreEdit" width="30%">
      <editScore ref="userScoreEditComponent" @success="editScoreClose"></editScore>
    </el-dialog>
    <el-dialog title="变更会员等级" destroy-on-close :visible.sync="showLevelEdit" width="30%">
      <editLevel ref="userLevelEditComponent" @success="editLevelClose"></editLevel>
    </el-dialog>
  </el-container>
</template>

<script>
import {getuserdetail, getuserstatistic} from '@/api/mall/user';
import moneyList from './components/moneyList';
import scoreList from './components/scoreList';
import couponList from './components/couponList';
import editMoney from './components/editMoney';
import editScore from './components/editScore';
import editLevel from './components/editLevel';
import {getMembershipList} from '@/api/mall/vipuser';
import {jur_addons_item, jur_addons} from '@/utils/jurisdiction';
export default {
  data() {
    return {
      showCoupon: false,
      showMoney: false,
      showScore: false,
      showScoreEdit: false,
      showMoneyEdit: false,
      showPhoneUpdate: false,
      showLevelEdit: false,
      activeName: 'user',
      isLoading: false,
      MembershipList: [],
      obj: {},
      statistic: {}
    };
  },
  components: {
    moneyList,
    scoreList,
    couponList,
    editMoney,
    editScore,
    editLevel
  },
  created() {
    this.id = this.$route.query.id;
    jur_addons([20]).then(res => {
      if (res[20]) {
        this.getMembershipList();
      }else{
        this.getItemById(this.id);
        this.getuserstatistic(this.id);
      }
    });
  },
  mounted() {
    //加载支付模板列表
    //this.getTemplateAll();
    //this.getConfig('mallPayMode');
  },
  methods: {
    getMembershipList() {
      getMembershipList(1, 100, {status: 1}).then(res => {
        console.log(res);
        this.MembershipList = res.msg.data || [];
        this.getItemById(this.id);
        this.getuserstatistic(this.id);
      });
    },
    getuserstatistic(id) {
      let data = {id: id};
      getuserstatistic(data).then(res => {
        this.statistic = res.msg;
      });
    },
    //显示变更积分
    editScoreShow() {
      this.showScoreEdit = true;
      this.$nextTick(_ => {
        this.$refs.userScoreEditComponent.init(this.obj.id);
      });
    },
    //关闭变更积分回调
    editScoreClose() {
      //重新加载数据
      this.showScoreEdit = false;
      this.getItemById(this.$route.query.id);
    },
    editLevelShow() {
      this.showLevelEdit = true;
      this.$nextTick(_ => {
        this.$refs.userLevelEditComponent.init(this.obj.id, this.MembershipList);
      });
    },
    editLevelClose() {
      this.showLevelEdit = false;
      this.getItemById(this.$route.query.id);
    },
    //显示变更余额
    editMoneyShow() {
      this.showMoneyEdit = true;
      this.$nextTick(_ => {
        this.$refs.userMoneyEditComponent.init(this.obj.id);
      });
    },
    //关闭变更余额回调
    editMoneyClose() {
      //重新加载数据
      this.showMoneyEdit = false;
      this.getItemById(this.$route.query.id);
    },

    //显示优惠券
    couponShow() {
      this.showCoupon = true;
      this.$nextTick(_ => {
        this.$refs.couponListComponent.init(this.obj.id);
      });
    },
    //关闭优惠券回调
    couponClose() {
      this.showCoupon = false;
    },
    //显示余额记录
    moneyShow() {
      this.showMoney = true;
      this.$nextTick(_ => {
        this.$refs.moneyListComponent.init(this.obj.id);
      });
    },
    scoreShow() {
      this.showScore = true;
      this.$nextTick(_ => {
        this.$refs.scoreListComponent.init(this.obj.id);
      });
    },
    //关闭余额记录回调
    moneyClose() {
      this.showMoney = false;
    },
    scoreClose() {
      this.showScore = false;
    },

    //加载数据
    getItemById(id) {
      this.isLoading = true;
      getuserdetail({id})
        .then(res => {
          this.isLoading = false;
          this.obj = {...res.msg};
          this.obj.levelname = '普通用户';

          if (this.obj.level > 0&&this.MembershipList.length>0) {
            let d = this.MembershipList.filter(a => {
              return a.level == this.obj.level;
            });
            if (d.length > 0) {
              this.obj.levelname = d[0].name;
            } else {
              this.obj.levelname = '普通用户';
            }
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //获取余额清单
    getMoneyDetail(id) {}
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content {
  border-bottom: 0;
}

::v-deep .el-tabs__nav-scroll {
  padding-left: 20px;
}

.el-form-item {
  margin-bottom: 10px;
}

.info {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px);

  .info_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .info_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }

      .content {
        .user_base {
          display: flex;
          padding: 20px 0;

          .head_pic {
            width: 160px;
            display: flex;
            justify-content: center;
            padding-top: 50px;

            .fpic {
              width: 90px;
              height: 90px;
              border: 4px solid #ffffff;
              border-radius: 100%;
              -webkit-box-shadow: 0 4px 10px rgba(0, 82, 169, 0.2);
              box-shadow: 0 4px 10px rgba(0, 82, 169, 0.2);
              display: inherit;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              -ms-flex-negative: 0;
              flex-shrink: 0;
              overflow: hidden;
            }
          }

          .base_info {
            flex-grow: 1;

            .name {
              color: #7f7f7f;
              font-weight: 700;
              margin-bottom: 20px;
            }

            .attrs {
              display: flex;

              .attr_group {
                flex-grow: 1;

                .source {
                  font-size: 24px;

                  &.weixin {
                    color: #333333;
                  }
                }
              }
            }
          }
        }

        .user_statistics {
          margin-top: 20px;
          margin-bottom: 20px;
          display: flex;

          .statistics_item {
            flex-grow: 1;
            margin-right: 20px;
            box-sizing: border-box;
            border: 1px solid #e0e3e8;
            height: 140px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            &:last-child {
              margin-right: 0;
            }

            .num {
              font-weight: bold;
              font-size: 24px;
              line-height: 34px;
              padding: 5px 0;
              margin-top: 5px;
            }
          }
        }

        .user_consume {
          margin-top: 20px;
          display: flex;

          .consume_item {
            flex-grow: 1;
            margin-right: 20px;
            box-sizing: border-box;
            border: 1px solid #e0e3e8;

            display: flex;
            // justify-content: center;
            padding: 35px;

            &:last-child {
              margin-right: 0;
            }

            .icon {
              font-size: 50px;
              margin-right: 20px;
            }

            .data {
              display: flex;
              flex-direction: column;

              .name {
                font-size: 14px;
                color: #303133;
              }

              .num {
                color: #909399;
                margin-top: 10px;

                ::v-deep .el-link--inner {
                  font-size: 24px;
                }
              }
            }
          }
        }
      }
    }
  }

  .info_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
</style>
